<template>
    <div class="info-page">
        <!-- 搜索 -->
        <el-form ref="queryForm" :model="queryFormModel" :inline="true">
            <el-form-item label="分类标题">
                <el-input
                    placeholder="请输入分类标题"
                    v-model="queryFormModel.name"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="showAdd">
                    新增分类
                </el-button>
                <el-button type="primary" @click="onSearch"> 查询 </el-button>
                <el-button @click="resetSearchForm"> 重置 </el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <div class="table-content">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="id" label="分类ID" width="80" />
                <el-table-column prop="name" label="分类标题" width="180" />
                <el-table-column
                    prop="createTime"
                    label="创建时间"
                ></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            @click="showAdd(scope.row)"
                            round
                            >编辑</el-button
                        >
                        <el-button
                            type="danger"
                            @click="delItem(scope.row)"
                            round
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="changePage"
                    :total="total"
                />
            </div>
        </div>

        <!-- 新增和编辑弹窗 -->
        <el-dialog v-model="dialogFormVisible" :title="dialogTitle" width="40%">
            <el-form
                :model="infoForm"
                :rules="rules"
                ref="infoFormRef"
                label-width="120px"
            >
                <el-form-item label="用户名" prop="name">
                    <el-input
                        style="width: 250px"
                        v-model="infoForm.name"
                        placeholder="请填写分类名称"
                        autocomplete="off"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="handleConfirm">
                        保存
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { format } from '@/utils'
import {
    getGameTypeList,
    getGameTypeSaveOrUpdate,
    delGameType
} from '@/api/game'
const queryForm = ref(null)
const infoFormRef = ref(null)
const total = ref(0)
const tableData = ref([])
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增分类')
let page = 1,
    size = 20
const infoForm = ref({
    name: '',
    id: ''
})
const rules = {
    name: [{ required: true, message: '请填写分类标题', trigger: 'blur' }]
}

const queryFormModel = ref({
    name: ''
})
const onSearch = () => {
    page = 1
    getList()
}
const resetSearchForm = () => {
    queryFormModel.value.name = ''
    page = 1
    getList()
}
const changePage = (pageNum) => {
    page = pageNum
    getList()
}

const showAdd = (item) => {
    if (item) {
        infoForm.value.name = item && item.name ? item.name : ''
        infoForm.value.id = item && item.id ? item.id : ''
        dialogTitle.value = '编辑分类'
    } else {
        dialogTitle.value = '新增分类'
    }
    dialogFormVisible.value = true
}
const delItem = ({ id }) => {
    ElMessageBox({
        title: '提示',
        message: '是否要删除这条数据?',
        type: 'warning',
        showCancelButton: true
    }).then(() => {
        delGameType({ id }).then((res) => {
            console.log('delGameType: ', res)
            ElMessage.success('删除成功！')
            resetSearchForm()
        })
    })
}
const handleConfirm = () => {
    infoFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const params = { ...infoForm.value }
            if (dialogTitle.value === '新增分类') {
                delete params.id
            }
            getGameTypeSaveOrUpdate(params).then((res) => {
                console.log('getGameTypeSaveOrUpdate', res.data)
                if (!res.code) {
                    dialogFormVisible.value = false
                    ElMessage.success(dialogTitle.value + '成功！')
                    page = 1
                    getList()
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

async function getList() {
    try {
        const params = {
            pageNo: page,
            size,
            name: queryFormModel.value.name
        }
        const res = await getGameTypeList(params)
        console.log('getGameTypeList: ', res)
        if (!res.code) {
            total.value = res.data.total
            const list = res.data.records || []
            list.forEach((r) => {
                // update_time
                if (r.createTime) {
                    r.createTime = format(r.createTime)
                }
                if (r.updateTime) {
                    r.updateTime = format(r.updateTime)
                }
            })
            tableData.value = list
        }
    } catch (error) {
        console.log(error)
    }
}
onMounted(() => {
    getList()
})
</script>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>
<style scoped>
.pagination-box {
    margin-top: 20px;
    padding-left: 50px;
}
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
